<template>
  <view class="page-container">
    <view class="form-container">
      <view class="title">用户注册</view>
      <!-- 用户名输入 -->
      <view class="input-group">
        <input 
          type="text" 
          v-model="username" 
          placeholder="请设置用户名" 
          class="input" 
        />
      </view>
      <!-- 密码输入 -->
      <view class="input-group">
        <input 
          type="password" 
          v-model="password" 
          placeholder="请设置密码（至少6位）" 
          class="input" 
        />
      </view>
      <!-- 确认密码输入 -->
      <view class="input-group">
        <input 
          type="password" 
          v-model="confirmPwd" 
          placeholder="请确认密码" 
          class="input" 
        />
      </view>
      <!-- 注册按钮 -->
      <button class="btn register-btn" @click="onRegister">注册</button>
      <!-- 跳转登录 -->
      <view class="link-container">
        <text>已有账号？</text>
        <text class="link" @click="toLoginPage">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名
      password: '', // 密码
      confirmPwd: '' // 确认密码
    }
  },
  methods: {
    onRegister() {
      if (!this.checkForm()) return;

      uni.showLoading({ title: '注册中...' });
      uniCloud.callFunction({
        name: 'addUser', // 云函数名称
        data: { // 传递给云函数的参数
          username: this.username,
          password: this.password
        },
        success: (res) => {
          this.handleRegisterSuccess(res);
        },
        fail: (err) => {
          this.handleRegisterFail(err);
        }
      })
    },
    checkForm() {
      if (!this.username) {
        uni.showToast({ title: '请输入用户名', icon: 'none' });
        return false;
      }
      if (this.password.length < 6) {
        uni.showToast({ title: '密码至少6位', icon: 'none' });
        return false;
      }
      if (this.password !== this.confirmPwd) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' });
        return false;
      }
      return true;
    },
    // 注册成功
    handleRegisterSuccess(res) {
      console.log("注册回调：", JSON.stringify(res));
      uni.hideLoading();
      if (res.result.code === 200) {
        uni.showToast({ title: '注册成功' });
        setTimeout(() => uni.navigateBack(), 1000);
      } else {
        uni.showToast({ title: res.result.message, icon: 'none' });
      }
    },
    // 注册失败
    handleRegisterFail(err) {
      console.error("注册失败：", err);
      uni.hideLoading();
      uni.showToast({ title: '网络异常，请重试', icon: 'none' });
    },
    toLoginPage() {
      uni.navigateTo({ url: '/pages/components/login/login' });
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 30rpx;
  min-height: 100vh;
  background: linear-gradient(180deg, #ffe6f0 0%, #ffccd5 100%);
}
.form-container {
  width: 90%;
  margin: 0 auto;
  background: #fff;
  padding: 40rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(255, 181, 188, 0.2);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #ffb5bc;
}

.input-group {
  margin-bottom: 20rpx;
}
.input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.input:focus {
  border-color: #ffb5bc; 
}

.register-btn {
  width: 100%;
  padding: 20rpx;
  background: #ffb5bc;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
}
.register-btn:active {
  background: #ff99a8;
}

.link-container {
  text-align: center;
  margin-top: 30rpx;
  font-size: 26rpx;
  color: #666;
}
.link {
  color: #ffb5bc;
  margin-left: 10rpx;
}
</style>